<template>
  <div class="maybe">
    <div class="divider">
      <el-divider style="width: 65%">猜你喜欢</el-divider>
    </div>
    <div>
      <el-row v-infinite-scroll="load" infinite-scroll-distance="50">
        <el-col v-for="item in maybeList" :key="item.src" :span="12">
          <img :src="item.src" :alt="item.title" />
          <p class="title">{{ item.title }}</p>
          <p class="price">￥{{ item.price }}</p>
        </el-col>
        <el-col v-if="loading" class="loadTip" :span="24">加载中...</el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
let loading = ref(false)
let maybeList = ref([
  {
    src: '//gw.alicdn.com/bao/uploaded/i4/501803377/O1CN01skMKyA1aoi7bloqHO_!!501803377-0-lubanu-s.jpg_500x500q90.jpg_.webp',
    title: '正品阿迪达斯 Adidas x Parley Ultra Boost DNA联名线条纹跑步鞋',
    price: '1450'
  },
  {
    src: '//gw.alicdn.com/bao/uploaded/i2/2935357342/O1CN01sM6tF6246gUwZ2NcT_!!0-item_pic.jpg_500x500q90.jpg_.webp',
    title: '运动裤卫裤子男韩版潮流百搭痞帅宽松束脚九分vibe休闲裤长裤子男',
    price: '169'
  },
  {
    src: '//gw.alicdn.com/bao/uploaded/i1/4158134287/O1CN01Ar1oIH1hXUaxsrVD7_!!0-item_pic.jpg_500x500q90.jpg_.webp',
    title: '【官方旗舰店】leopold原装腕手托利奥博德键盘FC660M/FC660C可用',
    price: '99'
  },
  {
    src: '//gw.alicdn.com/bao/uploaded/i2/2616970884/O1CN01OcYmxK1IOumZDu2Nv_!!0-item_pic.jpg_500x500q90.jpg_.webp',
    title: '创维24英寸75hz显示器办公台式电脑IPS屏幕可升降旋转24X2',
    price: '799'
  },
  {
    src: '//gw.alicdn.com/bao/uploaded/i1/2213897656/O1CN01whYCEA26QUqNG9vlN_!!2213897656.jpg_500x500q90.jpg_.webp',
    title: '11Pro/Max浅色香芋紫婴儿天蓝iPhone12 MAX XR手机壳678p纯色软壳',
    price: '11.9'
  },
  {
    src: '//gw.alicdn.com/bao/uploaded/i1/1768808336/O1CN01NkfTHv2BRwBy4krT2_!!0-item_pic.jpg_500x500q90.jpg_.webp',
    title: '运动裤男宽松秋季篮球长裤美式加绒加厚束脚裤子春秋德鲁大叔卫裤',
    price: '79'
  }
])
let load = () => {
  loading.value = true
  setTimeout(() => {
    let datas = [
      {
        src: '//gw.alicdn.com/bao/uploaded/i4/501803377/O1CN01skMKyA1aoi7bloqHO_!!501803377-0-lubanu-s.jpg_500x500q90.jpg_.webp',
        title: '正品阿迪达斯 Adidas x Parley Ultra Boost DNA联名线条纹跑步鞋',
        price: '1450'
      }
    ]
    maybeList.value = [...maybeList.value, ...datas]
    loading.value = false
  }, 2000)
}
</script>

<style lang='less' scoped>
.maybe {
  .divider {
    display: flex;
    flex-direction: row;
    justify-content: center;
    .el-divider {
      background-color: #cccccc;
      /deep/.el-divider__text {
        background-color: #e5e9f2;
        font-weight: 600;
      }
    }
  }
  .el-col {
    padding: 5px;
    img {
      border-radius: 5px;
      width: 100%;
    }
    .title {
      font-size: 13px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .price {
      font-weight: 600;
      color: tomato;
    }
  }
  .loadTip {
    color: #5e6d82;
    text-align: center;
  }
}
</style>
